<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>dome1</title>
    <style type="text/css">
         .float{ float: left; }
        .relative{ position: relative;}
        .absolute{ position: absolute;}
        .inbo{display: inline-block; vertical-align:top;
            overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
              border-color: #ccc;
             width: 300px; height:100px;
            border-width:25px  10px;
             -webkit-border-image: url(http://2kid.org/wp-content/uploads/2011/10/border1.png) 25 10 25  10  stretch stretch;
            
                     }
    </style>
</head>
<body>
<span>inline</span>
<span class="float">float</span>
<span class="relative">relative</span>
<span class="absolute">absolute</span>

<div>
    <img src="http://dotnet.aspx.cc/Images/border.png" alt="">
    <img src="http://www.webskys.com/d/file/css3/2011-02-19/91c0a5e25203c7c980b75465ec5b289a.jpg" alt="">
    <img src="http://2kid.org/wp-content/uploads/2011/10/border1.png" alt="">
    <span class="inbo">
       一、前面的所以然

      </span>
    <span class="inbo">
        一、前面的所以然


 
好吧，我就八卦下这些前端前沿技术相关名字。
    </span>
</div>
<div style="width: 300px;
height:100px;
border-width:25px  10px;
-webkit-border-image: url(http://2kid.org/wp-content/uploads/2011/10/border1.png) 25 10 25  10  stretch stretch;"></div>
<div style=" width: 300px; height:100px;border-width:25px  10px;-webkit-border-image: url(http://2kid.org/wp-content/uploads/2011/10/border1.png) 25 10 25  10  stretch stretch;"></div>
</body>
</html>